<div ng-controller="filesUpload.index" class="container-fluid" nv-file-drop="" uploader="filesUploader">
    <div class="row">
        <div class="col-lg-4"  style="height:400px;border:1px solid rgb(206, 202, 202);border-radius: 5px;margin-top: 40px;margin-left:10px;">
            <div style="text-align:center;width:160px;border-bottom:0px solid rgb(206, 202, 202);color:#000;font-size: 18px;margin-top: -10px;background-color: #fff">
               选择上传路径
            </div>
            <div style="margin-top: 0px;">
                <button type="button" class="aButton" data-toggle="modal" data-target="#showAddDirectory" style="margin-bottom:10px;">
                    添加根目录
                </button>
                <ul id="FUzTreeBox" class="ztreeFileUpload showFileSummary" style="width: 100%;background-color: white;overflow-y:auto;height: 270px;margin-top: 0px; border: 1px solid #eee;"></ul>
                <div style="margin-top: 15px; float: left;">
                    <span ng-if="!customPathSwitch"><span>存储位置：{{curChooseNodePath}}</span></span>
                    <span ng-if="customPathSwitch"><span>存储位置：</span><input type="text" style="border: 1px solid #3c9df9;" ng-model="curChooseNodePath"></span>                    
                </div>
                <!-- <button id="savePathBtn" type="button" style="margin-top: 15px; float: right;" ng-click="customSavePath()">
                    自定义存储位置
                </button> -->
            </div>
        </div>
        <div class="col-lg-7" style="padding-top: 10px;border:1px solid #cdd1d8;margin-left:4%;margin-top: 2%;border-radius: 5px;height: 400px;">    
           <div style="background-color: #fff;color:#000;font-size: 18px;margin-top:-20px;text-align: center;width:160px;">
                    选择上传标签
            </div>
            <div style="margin-top:8px;">
 
                    <div class="row" style="border-bottom:1px solid #F1F1F1;margin:2px;padding-bottom:2px;">
                            <div class="col-lg-2" style="padding-left:10px;">
                                标签类型
                            </div>
                            <div class="col-lg-9" style="padding-left: 8px;">
                                <span>标签名称</span>
                            </div>
                            <div class="col-lg-1" style="width:100px;float: right;">
                                <button type="button" class="aButton" style=" right: 2px; margin-top:-10px;margin-bottom: 5px;"
                                    data-toggle="modal" data-target="#showAddCusTagName">
                                    添加标签
                                </button>
                            </div>
                        </div>
                        <div class="showFileSummary"
                            style="padding:2px;margin:5px;overflow-y:auto;height:260px;overflow-x:hidden;margin-top:5px;border-bottom:1px solid #8c8d8f;">
                        
                            <div ng-repeat="tag in tags">
                        
                                <div class="row" style="border-bottom:1px solid #cdd1d8;padding:5px;">
                                    <div class="col-lg-2">
                                        <span>{{tag.tagType}}: </span>
                                    </div>
                                    <div class="col-lg-10" style="padding-left: 0px;">
                                        <div class="fo" ng-repeat="tagName in tag.tagNames track by $index" ng-show="showNotChooseTagName"
                                            style="margin-top: 0px; margin-bottom: 10px;">
                                            <a href="javascript:void(0);" class="ftr" ng-click="addTagNames($index, tag.tagType, tag.id)"
                                                style="background-color: #fff;color: #3468b5;border: 1px solid;" id="tagName{{$index}}"
                                                flagNum="{{$index}}">{{tagName}}</a>
                                        </div>
                                    </div>
                                </div>
                        
                        
                            </div>
                        
                        </div>
            </div>
            <div class="fileField showFileSummary" style="overflow-y:auto;height:70px;overflow-x:hidden;border-bottom: 0px;">
                <!-- 标签类型 -->
                <div class="fo" ng-repeat="newTag in newTags track by $index" ng-show="showChooseTagName">
                    <a href="javascript:void(0);" class="ftr" style="background-color: #fff;color: #3468b5;border: 1px solid;">{{newTag.tagName}}<i ng-click="removeTag($index, newTag)">×</i></a>
                </div>
            </div>                
        </div>
        <!-- <div class="col-lg-1" style="padding-top: 15px;">
            <button type="button" class="btn btn-info" style="margin-top: 15px;margin-left: 0px; margin-right: 0px; float: right;" data-toggle="modal" data-target="#showAddCusTagName">
                添加标签
            </button>
        </div> -->
    </div>
    <div class="row" style="margin-top: 30px;">
        <div class="col-md-11">
            <div ng-show="filesUploader.isHTML5">
                <!-- 3. nv-file-over uploader="link" over-class="className" -->
                <div class="well my-drop-zone panel-body" nv-file-over="" uploader="filesUploader">
                    您可以直接将文件拖拽到此处或者点击选择文件按钮
                </div>

                <!-- Example: nv-file-drop="" uploader="{Object}" options="{Object}" filters="{String}" -->
                <!-- <div nv-file-drop="" uploader="uploader" options="{ url: '/foo' }">
                    <div nv-file-over="" uploader="uploader" over-class="another-file-over-class" class="well my-drop-zone">
                        Another drop zone with its own settings
                    </div>
                </div> -->
            </div>

            <!-- Example: nv-file-select="" uploader="{Object}" options="{Object}" filters="{String}" -->
            <!-- Multiple -->
            <!-- <input type="file" nv-file-select="" uploader="uploader" multiple  /><br/> -->

            <!-- Single
            <input type="file" nv-file-select="" uploader="uploader" /> -->
            <style>
                .fileUpload {
                    position: relative;
                    overflow: hidden;
                    margin: 10px;
                }
    
                .fileUpload input.upload {  
                    position: absolute;
                    top: 0;
                    right: 0;
                    margin: 0;
                    padding: 0;
                    font-size: 20px;
                    cursor: pointer;
                    opacity: 0;
                    filter: alpha(opacity=0);
                }
            </style>
        </div>
        <!-- <button type="button" class="fileUpload btn btn-outline btn-info" style="margin-top: 15px; float: right;">
                选择文件
                <input type="file" nv-file-select="" uploader="filesUploader" multiple class="upload" />
            </button>
            <style>
                .my-drop-zone { border: dotted 3px lightgray; }
                .nv-file-over { border: dotted 3px red; } /* Default class applied to drop zones on over */
            </style> -->
        <div class="col-md-1">
            <button type="button" class="fileUpload btn btn-outline btn-info" style="margin-top: 15px;margin-left: 0px; margin-right: 0px; float: right;">
                选择文件
                <input type="file" nv-file-select="" uploader="filesUploader" multiple class="upload" />
            </button>
            <style>
                .my-drop-zone { border: dotted 3px lightgray; }
                .nv-file-over { border: dotted 3px red; } /* Default class applied to drop zones on over */
            </style>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12" style="margin-bottom: 40px">

            <!-- <h3>上传队列</h3> -->
            <p>现有文件: {{ filesUploader.queue.length }}个</p>

            <table class="table">
                <thead>
                    <tr>
                        <th width="50%">文件名</th>
                        <!-- <th ng-show="filesUploader.isHTML5">发文字号</th> -->
                        <th ng-show="filesUploader.isHTML5">大小</th>
                        <th ng-show="filesUploader.isHTML5">上传进度</th>
                        <th>上传状态</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="item in filesUploader.queue">
                        <td><strong>{{ item.file.name }}</strong></td>
                        <!-- <td ng-show="filesUploader.isHTML5" nowrap>
                            <input ng-model="item.number" class="form-control ng-valid ng-dirty ng-valid-parse ng-touched"
                                style="height: 25px;" ng-disabled="item.isReady || item.isUploading || item.isSuccess">
                        </td> -->
                        <td ng-show="filesUploader.isHTML5" nowrap>{{ item.file.size/1024/1024|number:2 }} MB</td>
                        <td ng-show="filesUploader.isHTML5">
                            <div class="progress" style="margin-bottom: 0;">
                                <div class="progress-bar" style="background-color: #5cb85c;" role="progressbar"
                                    ng-style="{ 'width': item.progress + '%' }"></div>
                            </div>
                        </td>
                        <td class="text-center">
                            <span ng-show="item.isSuccess"><i class="glyphicon glyphicon-ok"></i></span>
                            <span ng-show="item.isCancel"><i class="glyphicon glyphicon-ban-circle"></i></span>
                            <span ng-show="item.isError"><i class="glyphicon glyphicon-remove"></i></span>
                        </td>
                        <td nowrap>
                            <button type="button" class="btn btn-success btn-xs" ng-click="item.upload()" ng-disabled="item.isReady || item.isUploading || item.isSuccess">
                                <span class="glyphicon glyphicon-upload"></span> 上传
                            </button>
                            <button type="button" class="btn btn-warning btn-xs" ng-click="item.cancel()" ng-disabled="!item.isUploading">
                                <span class="glyphicon glyphicon-ban-circle"></span> 取消
                            </button>
                            <button type="button" class="btn btn-danger btn-xs" ng-click="item.remove()">
                                <span class="glyphicon glyphicon-trash"></span> 删除
                            </button>
                        </td>
                    </tr>
                </tbody>
            </table>

            <div>
                <div>
                    总进度:
                    <div class="progress" style="height: 8px; margin-top: 5px;">
                        <div class="progress-bar" style="background-color: #5cb85c;" role="progressbar" ng-style="{ 'width': filesUploader.progress + '%' }"></div>
                    </div>
                </div>
                <button type="button" class="btn btn-success btn-s" ng-click="filesUploader.uploadAll()" ng-disabled="!filesUploader.getNotUploadedItems().length">
                    <span class="glyphicon glyphicon-upload"></span> 批量上传
                </button>
                <button type="button" class="btn btn-warning btn-s" ng-click="filesUploader.cancelAll()" ng-disabled="!filesUploader.isUploading">
                    <span class="glyphicon glyphicon-ban-circle"></span> 批量取消
                </button>
                <button type="button" class="btn btn-danger btn-s" ng-click="filesUploader.clearQueue()" ng-disabled="!filesUploader.queue.length">
                    <span class="glyphicon glyphicon-trash"></span> 批量删除
                </button>
            </div>

        </div>

    </div>

    <!-- 自定义标签名称的弹出窗口 -->
    <div class="modal fade" data-backdrop="static" id="showAddCusTagName" tabindex="-1" role="dialog" aria-labelledby="showAddCusTagNameLabel" aria-hidden="true">
        <div class="modal-dialog" style="width:35%">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="">
                        <span>自定义标签名称</span>
                    </h4>
                </div>
                <div class="modal-body" style="padding:3%;">    
                    <div style="margin-bottom: 40px; padding-left: 5px;">
                        <div class="filterBy byType">
                            <div style="margin-bottom: 0;padding-left: 0;list-style-type: none;">
                                <div class="tagType">
                                    所属类型：
                                    <!-- <a ng-repeat="tagBelong in tags track by $index" id="{{$index}}" href="javascript:void(0);" ng-click="cusBelongTagtype($index, tagBelong.tagType)" class="ftr" style="text-decoration: none; margin-right: 10px; color: #333;">{{tagBelong.tagType}}</a> -->
                                    <ul class="nav navbar-top-links navbar-right" style="width: 80%;">
                                        <li class="dropdown" style="width: 100%;">
                                            <input class="form-control" type="text" placeholder="" style="width: 75%;float: left;border-top-right-radius: 0;border-bottom-right-radius: 0;" ng-model="tagTypeForChoose">
                                            <button type="button" class="btn btn-default" style="width:10%; border-top-left-radius: 0;border-bottom-left-radius: 0;" data-toggle="dropdown" aria-expanded="false">
                                                <i class="fa fa-caret-down fa-fw"></i>
                                            </button><br>
                                            <span style="color: red;" ng-show="showTagTypeTip">此项不能为空</span>
                                            <ul class="dropdown-menu" style="z-index:9999;width: 100%;">
                                                <li ng-repeat="tagTypeBelong in tags track by $index">
                                                    <a href="javascript:void(0);" ng-click="chooseTagType(tagTypeBelong)">{{tagTypeBelong.tagType}}</a>
                                                </li>
                                            </ul>
                                        </li>
                                    </ul> 
                                </div>
                            </div>
                        </div>
                    </div>
                    <div style="margin-bottom: 20px; padding-left: 5px;">
                        <div class="filterBy byType">
                            <div style="margin-bottom: 0;padding-left: 0;list-style-type: none;">
                                <div class="tagType">
                                    标签名称：
                                    <!-- <a ng-repeat="tagBelong in tags track by $index" id="{{$index}}" href="javascript:void(0);" ng-click="cusBelongTagtype($index, tagBelong.tagType)" class="ftr" style="text-decoration: none; margin-right: 10px; color: #333;">{{tagBelong.tagType}}</a> -->
                                    <ul class="nav navbar-top-links navbar-right" style="width: 80%;">
                                        <li class="dropdown" style="width: 100%;">
                                            <input class="form-control" type="text" placeholder="" style="width: 85%;float: left;" ng-model="customTagName">
                                        </li>
                                    </ul> 
                                </div>
                                <br>
                                <span style="margin-left: 20%; color: red;" ng-show="showTagNameTip">此项不能为空</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-info" ng-click="saveCustomTagName()">
                        保存
                    </button>
                    <button type="button" class="btn btn-default" ng-click="cancelCustomTagName()">
                        取消
                    </button>
                </div>
            </div>
        </div>
    </div>

    <style>
        /* 解决高度塌陷问题和父子元素垂直外边距重叠的问题 */
        .clearfix:before,
        .clearfix:after {
        content: "";
        display: table;
        clear: both;
        }
    </style>

    <!-- 添加根目录的弹出窗口 -->
    <div class="modal fade" data-backdrop="static" id="showAddDirectory" tabindex="-1" role="dialog" aria-labelledby="showAddDirectoryLabel" aria-hidden="true">
        <div class="modal-dialog" style="width:35%">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="">
                        <span>添加根目录</span>
                    </h4>
                </div>
                <div class="modal-body clearfix" style="padding:3%; border-bottom: none;">    
                    目录名称：
                    <ul class="nav navbar-top-links navbar-right" style="width: 80%;">
                        <li class="dropdown" style="width: 100%;">
                            <input class="form-control" type="text" placeholder="" style="width: 75%;float: left;" ng-model="fileDirectory">
                        </li>
                    </ul>
                    <br>
                    <span style="margin-left: 20%; color: red;" ng-show="showDirectoryTip">此项不能为空</span>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-info" ng-click="saveFileDirectory(fileDirectory)">
                        保存
                    </button>
                    <button type="button" class="btn btn-default" ng-click="cancelFileDirectory()">
                        取消
                    </button>
                </div>
            </div>
        </div>
    </div>

</div>